<template>
  <div class="container">
     <button class="zan-btn" @click="showTopTips">
       显示toptips
     </button>
     <button class="zan-btn" @click="showToast">
       显示showToast
     </button>
     <toptips></toptips>
     <mpToast></mpToast>         
  </div>
</template>

<script>
 import { getComponentByTag, extractComponentId } from 'mpvue-zanui';
 import TopTips from 'mpvue-zanui/src/components/zan/toptips';
 import Toast from 'mpvue-zanui/src/components/zan/toast'; 
 export default {
   components: {
     toptips: TopTips,
     mpToast: Toast
   },
   data() {
     return {
       TopTips: {}
     }
   },
   methods: {
     showToast() {
       getComponentByTag(this,
         'mpToast').showZanToast('toast的内容')
     },
     showTopTips() {
       getComponentByTag(this, 'toptips').showZanTopTips('toptips的内容')
     }
   },
   created() {

   }
 }

</script>

<style scoped lang="scss">
  @include c('userinfo') {
    display: flex;
    flex-direction: column;
    align-items: center;

    @include e('avatar'){
      width: 128rpx;
      height: 128rpx;
      margin: 20rpx;
      border-radius: 50%;
    }
    @include e('nickname'){
      color: #aaa;
    }
  }

  @include c('usermotto'){
    margin-top: 150px;
  }

  @include c('form'){
     @include e('control'){
      display: block;
      padding: 0 12px;
      margin-bottom: 5px;
      border: 1px solid #ccc;
     }
  }
  @include c('counter'){
    display: inline-block;
    margin: 10px auto;
    padding: 5px 10px;
    color: blue;
    border: 1px solid blue;
  }

</style>
